<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <!--====== Required meta tags ======-->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
        <title>Vedhak - Adventure Tours and Travel HTML Template</title>
        <!--====== Favicon Icon ======-->
       
        <!--====== Flaticon css ======-->
        <link rel="stylesheet" th:href="@{/css/flaticon.css}">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" th:href="@{/css/all.min.css}">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
        <!--====== magnific-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/slick.css}">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" th:href="@{/css/nice-select.css}">
        <!--====== Animate css ======-->
        <link rel="stylesheet" th:href="@{/css/animate.css}">
        <!--====== Default css ======-->
        <link rel="stylesheet" th:href="@{/css/default.css}">
        <!--====== Style css ======-->
        <link rel="stylesheet" th:href="@{/css/style.css}">
    </head>
    <body>
        <!--====== Start Preloader ======-->
        <div class="preloader">
            <div class="loader">
                <div class="pre-shadow"></div>
                <div class="pre-box"></div>
            </div>
        </div><!--====== End Preloader ======-->
        <!--====== Search From ======-->
		<div class="modal fade search-modal" id="search-modal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form>
                        <div class="form_group">
                        	<input type="text" class="form_control" placeholder="Search here" name="search">
                        	<label><i class="fa fa-search"></i></label>
                        </div>
                    </form>
                </div>
            </div>
        </div><!--====== Search From ======-->
        <!--====== Start Header ======-->
        <header class="header-area">
            <!--=== Header Navigation ===-->
            <div class="header-navigation default-navigation">
                <div class="nav-overlay"></div>
                <div class="container-fluid">
                    <!--=== Primary Menu ===-->
                    <div class="primary-menu">
                        <!--=== Site Branding ===-->
                        <div class="site-branding">
                            <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                        </div>
                        <!--=== Nav Inner Menu ===-->
                        <div class="nav-menu">
                            <!--=== Mobile Logo ===-->
                            <div class="mobile-logo mb-30 d-block d-xl-none text-center">
                                <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                            </div>
                            <!--=== Nav Search ===-->
                            <div class="nav-search mb-30 d-block d-xl-none ">
                                <form>
                                    <div class="form_group">
                                        <input type="email" class="form_control" placeholder="Search Here" name="email" required="">
                                        <button class="search-btn"><i class="fas fa-search"></i></button>
                                    </div>
                                </form>
                            </div>
                            <!--=== Main Menu ===-->
                            <nav class="main-menu">
                                <ul>
                                    <li class="menu-item has-children"><a th:href="@{/index1}">Home</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/index1}">Home 01</a></li>
                                            <li><a th:href="@{/index2}">Home 02</a></li>
                                            <li><a th:href="@{/index3}">Home 03</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item has-children"><a th:href="@{/accommodation-grid}">Accommodation</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/accommodation-grid}">ACD Grid</a></li>
                                            <li><a th:href="@{/accommodation-standard}">ACD Standard</a></li>
                                            <li><a th:href="@{/index0}">ACD Slider</a></li>
                                            <li><a th:href="@{/accommodation-details}">ACD Details</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item has-children"><a th:href="@{/blog-standard}">Blog</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/blog-standard}">Blog Standard</a></li>
                                            <li><a th:href="@{/blog-details}">Blog Details</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item has-children"><a th:href="@{/about}">Pages</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/about}">About Us</a></li>
                                            <li><a th:href="@{/gallery}">Our Gallery</a></li>
                                            <li><a th:href="@{/faq}">Faq</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item"><a th:href="@{/contact}">Contact</a></li>
                                    <li class="menu-item"><div class="search-btn" data-bs-toggle="modal" data-bs-target="#search-modal"><i class="far fa-search"></i></div></li>
                                </ul>
                            </nav>
                            <!--=== Nav Button ===-->
                            <div class="menu-button mt-40 d-xl-none">
                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>
                            </div>
                        </div>
                        <!--=== Nav right Item ===-->
                        <div class="nav-right-item d-flex align-items-center">
                            <div class="menu-button d-xl-block d-none">
                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>
                            </div>
                            <div class="lang-dropdown">
                                <select class="wide">
                                    <option value="English">English</option>
                                    <option value="English">English</option>
                                </select>
                            </div>
                            <div class="navbar-toggler">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header><!--====== End Header ======-->
        <!--====== Start Breadcrumb Section ======-->
        <section class="page-banner light-red-bg pt-170 pb-250 bg_cover" style="background-image: url(static/image/page-bg-1.jpg);">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="page-banner-content text-center text-white">
                            <h1 class="page-title">Accommodation</h1>
                            <ul class="breadcrumb-link text-white">
                                <li><a th:href="@{/index1}">Home</a></li>
                                <li class="active">Accommodation Standard</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Breadcrumb Section ======-->
        <!--====== Start Accommodation form Section ======-->
        <section class="accommodation-form-section mt-minus-85 p-r z-2">
            <div class="container-fluid">
                <div class="accommodation-form-wrapper wow fadeInDown">
                    <form class="accommodation-form-two">
                        <div class="form_group">
                            <span>Check In</span>
                            <label><i class="far fa-calendar-alt"></i></label>
                            <input type="text" class="form_control datepicker" placeholder="Select Date">
                        </div>
                        <div class="form_group">
                            <span>Check Out</span>
                            <label><i class="far fa-calendar-alt"></i></label>
                            <input type="text" class="form_control datepicker" placeholder="Select Date">
                        </div>
                        <div class="form_group">
                            <span>Guest</span>
                            <label><i class="far fa-calendar-alt"></i></label>
                            <input type="text" class="form_control" placeholder="Persons">
                        </div>
                        <div class="form_group">
                            <span>Accommodations</span>
                            <select class="wide">
                                <option data-display="Accommodations">Accommodations</option>
                                <option value="01">Classic Tent</option>
                                <option value="01">Forest Camping</option>
                                <option value="01">Small Trailer</option>
                                <option value="01">Tree House Tent</option>
                                <option value="01">Tent Camping</option>
                                <option value="01">Couple Tent</option>
                            </select>
                        </div>
                        <div class="form_group">
                            <button class="main-btn filled-btn">Check availability</button>
                        </div>
                    </form>
                </div>
            </div>
        </section><!--====== End Accommodation form Section ======-->
        <!--====== Start Accommodation Section ======-->
        <section class="accommodation-section pt-100 pb-100">
            <div class="container-fluid">
                <div class="service-slider-one wow fadeInUp">
                    <div class="single-service-item-four">
                        <div class="img-holder">
                            <img th:src="@{/picture/service-16.jpg}" alt="Service Image">
                            <div class="hover-content">
                                <div class="inner-content d-flex justify-content-between">
                                    <div class="text">
                                        <h4 class="title"><a th:href="@{/accommodation-details}">Tent Camper</a></h4>
                                        <a th:href="@{/index0}" class="btn-link">check availability<i class="far fa-angle-double-right"></i></a>
                                    </div>
                                    <div class="icon">
                                        <a th:href="@{/accommodation-details}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="single-service-item-four">
                        <div class="img-holder">
                            <img th:src="@{/picture/service-17.jpg}" alt="Service Image">
                            <div class="hover-content">
                                <div class="inner-content d-flex justify-content-between">
                                    <div class="text">
                                        <h4 class="title"><a th:href="@{/accommodation-details}">Tent Camper</a></h4>
                                        <a th:href="@{/index0}" class="btn-link">check availability<i class="far fa-angle-double-right"></i></a>
                                    </div>
                                    <div class="icon">
                                        <a th:href="@{/accommodation-details}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="single-service-item-four">
                        <div class="img-holder">
                            <img th:src="@{/picture/service-18.jpg}" alt="Service Image">
                            <div class="hover-content">
                                <div class="inner-content d-flex justify-content-between">
                                    <div class="text">
                                        <h4 class="title"><a th:href="@{/accommodation-details}">Tent Camper</a></h4>
                                        <a th:href="@{/index0}" class="btn-link">check availability<i class="far fa-angle-double-right"></i></a>
                                    </div>
                                    <div class="icon">
                                        <a th:href="@{/accommodation-details}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="single-service-item-four">
                        <div class="img-holder">
                            <img th:src="@{/picture/service-19.jpg}" alt="Service Image">
                            <div class="hover-content">
                                <div class="inner-content d-flex justify-content-between">
                                    <div class="text">
                                        <h4 class="title"><a th:href="@{/accommodation-details}">Tent Camper</a></h4>
                                        <a th:href="@{/index0}" class="btn-link">check availability<i class="far fa-angle-double-right"></i></a>
                                    </div>
                                    <div class="icon">
                                        <a th:href="@{/accommodation-details}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Accommodation Section ======-->
        <!--====== Start Footer ======-->
        <footer class="footer-default dark-black-bg text-white">
            <div class="container">
                <div class="footer-newsletter pt-80 pb-40">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="section-title mb-30 wow fadeInLeft">
                                <h2>Subscribe Our Newsletter<span class="thin">Get Every Update</span></h2>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="newsletter-form mb-30 wow fadeInRight">
                                <form>
                                    <div class="form_group">
                                        <label><i class="far fa-envelope-open"></i></label>
                                        <input type="email" class="form_control" placeholder="Email Address" required="">
                                        <button class="main-btn btn-green">Subscribe<i class="far fa-angle-double-right"></i></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-widget-area pt-80 pb-30">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="footer-widget about-company-widget mb-40 wow fadeInDown">
                                <a th:href="@{/index1}" class="footer-logo"><img th:src="@{/picture/logo-white.png}" alt="Brand Logo"></a>
                                <p>Sit amet consectetur adipiscinelit
                                    Sem et aliquam enimdeassa ornare
                                    vulputate neque feugiat secursun
                                    blandit volutpat hendr mauris</p>
                                <ul class="social-link">
                                    <li><a th:href="@{/index0}"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a th:href="@{/index0}"><i class="fab fa-twitter"></i></a></li>
                                    <li><a th:href="@{/index0}"><i class="fab fa-instagram"></i></a></li>
                                    <li><a th:href="@{/index0}"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="footer-widget footer-nav-widget pl-lg-55 mb-40 wow fadeInUp">
                                <h4 class="widget-title">Links</h4>
                                <div class="footer-nav-content">
                                    <ul class="footer-nav">
                                        <li><a th:href="@{/index0}">Home</a></li>
                                        <li><a th:href="@{/index0}">Pricing</a></li>
                                        <li><a th:href="@{/index0}">About us</a></li>
                                        <li><a th:href="@{/index0}">Features</a></li>
                                        <li><a th:href="@{/index0}">Blog</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="footer-widget footer-nav-widget pl-lg-20 mb-40 wow fadeInDown">
                                <h4 class="widget-title">Services</h4>
                                <div class="footer-nav-content">
                                    <ul class="footer-nav">
                                        <li><a th:href="@{/index0}">Caravan Soler Tent</a></li>
                                        <li><a th:href="@{/index0}">Family Tent Camping</a></li>
                                        <li><a th:href="@{/index0}">Classic Tent Camping</a></li>
                                        <li><a th:href="@{/index0}">Wild Tent Camping</a></li>
                                        <li><a th:href="@{/index0}">Bell Glamp One</a></li>
                                        <li><a th:href="@{/index0}">Small Cabin Wood</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="footer-widget footer-nav-widget pl-lg-70 mb-40 wow fadeInUp">
                                <h4 class="widget-title">Support</h4>
                                <div class="footer-nav-content">
                                    <ul class="footer-nav">
                                        <li><a th:href="@{/index0}">Meet Our Team</a></li>
                                        <li><a th:href="@{/index0}">Item Support</a></li>
                                        <li><a th:href="@{/index0}">Contact Foram</a></li>
                                        <li><a th:href="@{/index0}">Report Abuse</a></li>
                                        <li><a th:href="@{/index0}">Live</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="footer-widget contact-info-widget pl-lg-100 mb-40 wow fadeInDown">
                                <div class="contact-info-box mb-35">
                                    <h4 class="title">Location</h4>
                                    <p><i class="far fa-map-marker-alt"></i><span>119 Tanglewood Lane
                                        Gulfport, MS 39503</span></p>
                                </div>
                                <div class="contact-info-box mb-35">
                                    <h4 class="title">Contact</h4>
                                    <p><i class="far fa-envelope"></i><a th:href="@{email-protection.html#d5a6a0a5a5baa7a195b2b8b4bcb9fbb6bab8}"><span class="__cf_email__" data-cfemail="89fafcf9f9e6fbfdc9eee4e8e0e5a7eae6e4">[email&#160;protected]</span></a></p>
                                    <p><i class="far fa-phone"></i><a th:href="@{tel:+000(123)4566}">+000 (123) 45 66</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--=== Copyright Area ===-->
                <div class="copyright-area">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="copyright-text">
                                <p>Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="copyright-nav float-lg-end">
                                <ul>
                                    <li><a th:href="@{/index0}">Setting & Privacy</a></li>
                                    <li><a th:href="@{/index0}">Faqs</a></li>
                                    <li><a th:href="@{/index0}">Food Menu</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer><!--====== End Footer ======-->
        <!--====== Back To Top  ======-->
        <a href="#" class="back-to-top"><i class="far fa-angle-up"></i></a>
        <!--====== Jquery js ======-->
        <script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script><script th:src="@{/js/jquery-3.6.0.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/popper.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <!--====== Slick js ======-->
        <script th:src="@{/js/slick.min.js}"></script>
        <!--====== Magnific js ======-->
        <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
        <!--====== Isotope js ======-->
        <script th:src="@{/js/isotope.min.js}"></script>
        <!--====== Imagesloaded js ======-->
        <script th:src="@{/js/imagesloaded.min.js}"></script>
        <!--====== Counterup js ======-->
        <script th:src="@{/js/jquery.counterup.min.js}"></script>
        <!--====== Waypoints js ======-->
        <script th:src="@{/js/jquery.waypoints.js}"></script>
        <!--====== Nice-select js ======-->
        <script th:src="@{/js/jquery.nice-select.min.js}"></script>
        <!--====== jquery UI js ======-->
        <script th:src="@{/js/jquery-ui.min.js}"></script>
        <!--====== WOW js ======-->
        <script th:src="@{/js/wow.min.js}"></script>
        <!--====== Main js ======-->
        <script th:src="@{/js/theme.js}"></script>
    </body>
</html>